{% extends "wechat/layout.html" %}

{% set title = '学习记录' %}
{% block contents %}
<div class="m-record">
  {% if course_map == 'map1' %}
	<div class="title">
		<h3 class="name">
      <i class="iconfont icon-left"></i> <!--第一页不显示-->
      <span class="course_title">地图1-爱丽丝小镇  </span>
      <i class="iconfont icon-right"></i>  <!--最后一页不显示-->
    </h3>
    <div class="during">1-40课</div>
	</div>
  {% endif %}
	<ul class="lists study_record_lists">
      <div id="load_records" style="display:none"></div>
	</ul>
	<div class="more">加载中...</div>
</div>
{% endblock %}
{% block js_assets %}
{{ super() }}
<script>
// var vConsole = new VConsole()
$(function(){
  var pages = [{
          title: '地图1-爱丽丝小镇',
          page: 'map1',
          during: '1-40课'
        },{
          title: '地图2-威尔第雪山',
          page: 'map2',
          during: '41-70课'
        },{
          title: '地图3-索拉朵之海',
          page: 'map3',
          during: '71-100课'
        },{
          title: '测评成绩',
          page: 'evaluation',
          during: '学习记录'
        }]
  var index = 1
  var page = 1

  if(!sessionStorage.getItem('course_map')){
      sessionStorage.setItem('course_map', 'map1');
  }else if(sessionStorage.getItem('course_map') == 'map2'){
      index = index + 1
      $("ul.study_record_lists > li").remove( ".list" );
  }else if(sessionStorage.getItem('course_map') == 'map3'){
      index = index + 2
      $("ul.study_record_lists > li").remove( ".list" );
  }else if(sessionStorage.getItem('course_map') == 'evaluation'){
      index = index + 3
      $("ul.study_record_lists > li").remove( ".list" );
  }
  init_map_info(index);
  recreate_records();

  // pull more records
  $(window).scroll(get_records);

  $('.icon-left').bind('click', function() {
    // hack 微信内切换错误
    var pages = [{
          title: '地图1-爱丽丝小镇',
          page: 'map1',
          during: '1-40课'
        },{
          title: '地图2-威尔第雪山',
          page: 'map2',
          during: '41-70课'
        },{
          title: '地图3-索拉朵之海',
          page: 'map3',
          during: '71-100课'
        },{
          title: '测评成绩',
          page: 'evaluation',
          during: '学习记录'
        }]
    index--
    if (index === 1) {
      index = 1
      $(this).hide()
    }
    $('.icon-right').show()
    init_map_info(index)
    sessionStorage.setItem('course_map', pages[index - 1].page)
     $( "ul.study_record_lists > li" ).remove( ".list" );
	  $( "ul.study_record_lists > span" ).remove( ".map_pages" );
    recreate_records();
  })

  $('.icon-right').bind('click',function(){
    // hack 微信内切换错误
    var pages = [{
          title: '地图1-爱丽丝小镇',
          page: 'map1',
          during: '1-40课'
        },{
          title: '地图2-威尔第雪山',
          page: 'map2',
          during: '41-70课'
        },{
          title: '地图3-索拉朵之海',
          page: 'map3',
          during: '71-100课'
        },{
          title: '测评成绩',
          page: 'evaluation',
          during: '学习记录'
        }]
    index++
    if (index === pages.length) {
      index = pages.length
      $(this).hide()
    }
    $('.icon-left').show()
    init_map_info(index)
    sessionStorage.setItem('course_map', pages[index - 1].page)
    $( "ul.study_record_lists > li" ).remove( ".list" );
	  $( "ul.study_record_lists > span" ).remove( ".map_pages" );
    recreate_records();
  });

  function get_records(){
      get_pages();
      var more_position = $('.more').offset().top - $(document).scrollTop();
      if( (page < pages) &&  (0 < more_position) && (more_position < $(window).height()) ){
		  if(parseInt(pages) > page){
			page +=1;
		  }
      recreate_records();
      }
  }
  function recreate_records(){
      $('.more').text("加载中...");
      url = "{{ url_for('wechat.record') }}" + sessionStorage.getItem('course_map');
      $.get(url,
          { is_ajax: 1, page: page},
          function( data ) {
            $('#load_records').before(data);
            $('.more').text("没有更多了");
		  });
  }
  function get_pages(){
    var map_pages = $(".study_record_lists").find('.map_pages:first');
    if(map_pages.length > 0){
        pages = parseInt(map_pages.text());
    }
  }
  function init_map_info(index){
      console.log(index)
      // hack 微信内切换错误
      var pages = [{
          title: '地图1-爱丽丝小镇',
          page: 'map1',
          during: '1-40课'
        },{
          title: '地图2-威尔第雪山',
          page: 'map2',
          during: '41-70课'
        },{
          title: '地图3-索拉朵之海',
          page: 'map3',
          during: '71-100课'
        },{
          title: '测评成绩',
          page: 'evaluation',
          during: '学习记录'
        }]
      $('.course_title').text(pages[index - 1].title);
      $('.during').text(pages[index - 1].during);
      if (index === 1) {
        $('.icon-left').hide()
        $('.icon-right').show()
      } else if (index === pages.length) {
        $('.icon-left').show()
        $('.icon-right').hide()
      } else {
        $('.icon-left').show()
        $('.icon-right').show()
      }
  }

});
</script>

{% endblock %}
